<template>
	<el-main>
		<el-card shadow="never" header="个人信息">
			<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right">
				<el-row>
					<el-col :span="24">
						<el-form-item label="头像" prop="avatar">
							<sc-upload v-model="form.avatar" title="上传头像"></sc-upload>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="账号" prop="username">
							<el-input v-model="form.username" disabled></el-input>
						</el-form-item>
						<el-form-item label="昵称" prop="nickname" clearable>
							<el-input v-model="form.nickname"></el-input>
						</el-form-item>
						<el-form-item label="性别" prop="gender">
							<el-radio-group v-model="form.gender">
								<el-radio-button label="1">男</el-radio-button>
								<el-radio-button label="0">女</el-radio-button>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="地址" prop="address" clearable>
							<el-input v-model="form.address" type="textarea"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="手机号" prop="mobile" clearable>
							<el-input v-model="form.mobile"></el-input>
						</el-form-item>
						<el-form-item label="姓名" prop="realName" clearable>
							<el-input v-model="form.realName"></el-input>
						</el-form-item>
						<el-form-item label="生日" prop="birthDate" clearable>
							<el-date-picker v-model="form.birthDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" style="width: 100%;"></el-date-picker>
						</el-form-item>
						<el-form-item label="备注" prop="remark" clearable>
							<el-input v-model="form.remark" type="textarea"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item>
					<el-button type="primary" :loading="isSaving" @click="submit()">保存</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</el-main>
</template>

<script>
export default {
	data() {
		return {
			isSaving: false,
			// 表单数据
			form: {
				id: null,
				username: null,
				nickname: null,
				mobile: null,
				realName: null,
				gender: null,
				birthDate: null,
				address: null,
				avatar: null,
				remark: null
			},
			// 表单验证规则
			rules: {
				username: [
					{required: true, message: '请输入用户名', trigger: "blur"}
				],
				nickname: [
					{required: true, message: '请输入昵称', trigger: 'blur'}
				],
				mobile: [
					{required: true, message: '请输入手机号', trigger: 'blur'}
				]
			}
		}
	},
	mounted() {
		this.getUserInfo();
	},
	methods: {
		async getUserInfo() {
			const data = await this.$API.auth.detail.get();
			this.form.id = data.id;
			this.form.username = data.username;
			this.form.nickname = data.nickname;
			this.form.mobile = data.mobile;
			this.form.realName = data.realName;
			this.form.gender = data.gender;
			this.form.birthDate = data.birthDate;
			this.form.address = data.address;
			this.form.avatar = data.avatar;
			this.form.remark = data.remark;
		},
		// 表单提交
		submit() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.isSaving = true;
					this.$API.manage.user.updateInfo.put(this.form).then(() => {
						this.$message.success("修改成功");
					}).catch(() => {
						this.isSaving = false;
					});
					this.isSaving = false;
				}
			})
		}
	}
}
</script>

<style>
</style>
